<!--
  ~
  ~ Licensed under the Apache License, Version 2.0 (the "License");
  ~ you may not use this file except in compliance with the License.
  ~ You may obtain a copy of the License at
  ~
  ~      http://www.apache.org/licenses/LICENSE-2.0
  ~
  ~ Unless required by applicable law or agreed to in writing, software
  ~ distributed under the License is distributed on an "AS IS" BASIS,
  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  ~ See the License for the specific language governing permissions and
  ~ limitations under the License.
  -->
<div class="ddp-type-selectbox ddp-search-type" [class.ddp-selected]="isListShow" [class.ddp-type-search-select]="!selectedColumn"
     (click)="isListShow = !isListShow">
  <!-- search -->
  <div class="ddp-input-search">
    <!-- 선택시 자동 input display:block; -->
    <input type="text" class="ddp-input-selectbox" placeholder="{{searchPlaceHolder}}"
           [(ngModel)]="searchKeyword" (ngModelChange)="onSearchColumn()" (keyup.esc)="initSearchKeyword()" (click)="$event.stopImmediatePropagation()">
  </div>
  <!-- search// -->
  <span class="ddp-txt-selectbox">{{selectedColumn ? selectedColumn.name : placeHolder}}</span>
  <div class="ddp-wrap-popup2 ddp-types">
    <ul class="ddp-list-popup">
      <li *ngIf="columnList.length === 0">
        <span class="ddp-noresult">{{'msg.comm.ui.no.rslt' | translate}}</span>
      </li>
      <li *ngFor="let column of columnList">
        <a href="javascript:" (click)="onSelectColumn(column)">
          <em class="{{getFieldDimensionTypeIconClass(column.logicalType)}}"></em>
          {{column.name}}
        </a>
      </li>
    </ul>
  </div>
</div>
